<template>
  <div :class="['section', 'exchange']">
    <div class="form">
      <p class="label">请输入兑换码</p>
      <input type="text" v-model="code" class="input_text" :maxlength="codeLen">
      <div class="btn" @click="submit">
        <img src="../assets/images/button_bg.png">
        <p>确认</p>
      </div>
    </div>
    <home></home>
    <dialogs ref="dialogs"
             :msg="currentDialogs.msg ? currentDialogs.msg.replace(
                  '{{masterName}}', $refs.feast ? $refs.feast.masterFeast.name : '') : ''"
             :btns="currentDialogs.btns">
    </dialogs>
  </div>
</template>

<script>
  import dialogs from "@/components/dialogs";
  import home from "@/components/home";

  export default {
    name: 'exchange',
    data: function () {
      return {
        code: "",
        codeLen: 6,
        currentDialogs: {},
        dialogs: {
          illegal: {
            msg: '<br>兑换码长度不合法！<br>',
            btns: [
              {
                value: '重新输入',
                href: 'close'
              }
            ]
          },
          succeed: {
            msg: '兑换成功！'
          },
          failed: {
            msg: '<br>兑换失败！<br>',
            btns: [
              {
                value: '重新输入',
                href: 'close'
              }
            ]
          }
        }
      }
    },
    components: {
      dialogs,
      home
    },
    methods: {
      submit: function () {
        if (this.code.length === 0 || this.code.length !== this.codeLen) {
          this.$set(this, 'currentDialogs', this.dialogs.illegal);
          this.$set(this.$refs.dialogs, 'isShow', true);
        } else if (!/[a-zA-Z0-9]/.test(this.code)) {
          this.$set(this, 'currentDialogs', this.dialogs.failed);
          this.$set(this.$refs.dialogs, 'isShow', true);
        } else {
          this.$set(this, 'currentDialogs', this.dialogs.succeed);
          this.$set(this.$refs.dialogs, 'isShow', true);
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/scss/config";

  .exchange {
    text-align: center;

    .form {
      position: absolute;
      left: setRem(56px);
      right: setRem(56px);
      top: 50%;
      transform: translateY(-64%);

      .label {
        font-size: setRem(28px);
      }

      .input_text {
        margin: setRem(28px) auto setRem(45px);
        appearance: none;
        border: none;
        padding: setRem(8px) setRem(16px);
        border-radius: setRem(8px);
        background-color: #e7c598;
        color: #bf0c21;
        width: setRem(280px);
        text-align: center;
        font-size: setRem(24px);
      }
    }
  }
</style>
